<template>
	<div class="basic_wrap">
		<bsHeader :title="$t('recharge.rechargeRecord')" @backurl="$router.back()"></bsHeader>
		<div class="item_wrap">
			<div class="item_list">
				<van-list v-model="loading" loading-text=" " offset="100" :finished="finished"
					:finished-text="$t('utils.noData')" @load="onLoad">
					<div class="item" v-for="(item,index) in list">
            <div class="littleItem">
              <div class="left">USDT-TRC20</div>
              <div class="right">
                <p class="color_blue" v-if="item.status==0">{{$t('tabs.pending')}}</p>
                <p class="color_green" v-if="item.status==1">{{$t('tabs.done')}}</p>
                <p class="color_red" v-if="item.status==2">{{$t('tabs.fail')}}</p>
                <p class="color_red" v-if="item.status==3">过期</p>
              </div>
            </div>
            <div class="littleItem">
              <div class="left">充值金额：{{item.money}}</div>
              <div class="right">{{item.time}}</div>
            </div>
            <div class="littleItem" style="display: flex;" v-if="item.status==0">
              <div class="btnL" style="flex: 1"></div>
              <div class="btn" @click="toCancl(item)">取消</div>
            </div>
<!--						<div class="flex_center">-->
<!--							<p>{{item.act_time}}</p>-->
<!--							<p class="color_blue" v-if="item.status==0">{{$t('tabs.pending')}}</p>-->
<!--							<p class="color_green" v-if="item.status==1">{{$t('tabs.done')}}</p>-->
<!--							<p class="color_red" v-if="item.status==2">{{$t('tabs.fail')}}</p>-->
<!--						</div>-->
<!--						<div class="flex_center">-->
<!--							<p>{{item.name}}-->
<!--								<span v-if="item.status==2">-->
<!--									<br><br><span class="color_red">{{$t('recharge.rechargeFailTips')}}</span>-->
<!--								</span>-->
<!--							</p>-->
<!--							<p class="color_green">{{common.currency_symbol_basic()}}{{common.precision_basic(item.money)}}<span-->
<!--									class="currency"></span><br>-->
<!--								<span class="money_usd" v-if="item.type!=1&&item.type!=5&&item.type!=6">≈ {{common.precision(item.money2)}} {{item.currency}}</span>-->
<!--								<span class="money_usd" v-if="item.type==1||item.type==5||item.type==6">≈ {{common.precision_basic(item.money)}} USDT</span>-->
<!--							</p>-->
<!--						</div>-->
					</div>
				</van-list>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import bsHeader from '../../components/bsHeader.vue'
	import Fetch from '../../utils/fetch'
  import {Dialog} from 'vant';
  Vue.use(Dialog);
	import {
		List
	} from 'vant';
	Vue.use(List);
	export default {
		name: "recharge",
		components: {
			bsHeader
		},
		data() {
			return {
				data: [],
				empty: false,
				loading: false,
				finished: false,
				list: [],
				page: 1,
				listRows: 8
			};
		},
		// //创建前设置
		// beforeCreate() {
		// 	//解决List上拉加载bug
		// 	document.querySelector('body').style["overflow-y"] = "unset";
		// },
		// //销毁前清除
		// beforeDestroy() {
		// 	document.querySelector('body').style["overflow-y"] = "scroll";
		// },
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#FFFFFF');
				plus.navigator.setStatusBarStyle('dark');
			}
			this.$parent.footer('user', false);
		},
		mounted() {},
		methods: {
      toCancl(item){
        let that = this
        Dialog.confirm({
          title: '温馨提示',
          message: '确定要取消该订单吗？',
        })
            .then(() => {
              // on confirm
              Fetch('/recharge/cancel', {
                id: item.id,
              }).then(r => {
                that.$toast('操作成功');
                that.page = 1
                that.list = []
                that.onLoad()
              });
            })
            .catch(() => {
              // on cancel
            });
      },
			precision(money) {
				var precision = localStorage.getItem('precision_basic');
				return (money / 1).toFixed(precision);
			},
			sort(type) {
				this.page = 1;
				this.empty = false;
				this.list = [];
				this.finished = false;
				this.loading = true;
				this.onLoad();
			},
			onLoad() {
				Fetch('/user/rechargeRecord', {
					page: this.page,
					listRows: this.listRows
				}).then(r => {
					if (r.data.length == 0) this.empty = true;
					var list = r.data.list;
					for (var i = 0; i < list.length; i++) {
						this.list.push(list[i]);
					}
					if (this.list.length >= r.data.length) {
						this.finished = true;
						return;
					}
					this.page = this.page + 1;
					this.loading = false;
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.basic_wrap {
		padding-bottom: 100px;
	}
	.item_wrap {
    white-space: normal;
    margin-top: 8px;
		.item_list {
      margin: 0 16px;
			.item {
        font-size: 14px;
        border-bottom: 1px solid #F2F2F2;
        padding-top: 18px;
        padding-bottom: 6px;
        .littleItem{
          display: flex;
          margin-bottom: 8px;
          .left{
            flex: 1;
          }
          .right{

          }
          .btn{
            width: 100px;
            height: 30px;
            background: linear-gradient(0deg, #1348FF 0%, #018DFF 100%);
            border-radius: 8px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
			}
		}
	}
</style>
